<template>
	<view class="contain">
	     <view class="flex-col page">
	       <view class="flex-col justify-start items-start relative section">
	         <text class="text">宠物店铺</text>
	         <view class="flex-col justify-start items-start group pos">
	           <text class="text_2">5秒匹配离您最近的服务商</text>
	           <image
	             class="image pos_2"
	             src="https://qiniu.ccchongya.com/chongya/images/16947555401294557130.png"
	           />

	         </view>
	       </view>
	       <view class="flex-col list">
	         <view class="flex-row items-center list-item space-x-20" v-for="(item, index) in list" :key="index">
	           <view class="flex-row items-center flex-auto">
	             <image
	               class="flex-auto image_2"
	               src="https://qiniu.ccchongya.com/chongya/images/16947555633209502494.png"
	             />
	             <view class="flex-col shrink-0 space-y-8">
	               <text class="self-start font_1 text_4">胖丫宠物</text>
	               <text class="font_3 text_5">湖北省宜昌市沿江大的88号</text>
	               <view class="flex-col">
	                 <view class="flex-row group_4 space-x-4">
	                   <view class="flex-col justify-start items-center text-wrapper"><text class="font_2">宠物美容</text></view>
	                   <view class="flex-col justify-start items-center text-wrapper_2">
	                     <text class="font_4">宠物殡葬</text>
	                   </view>
	                 </view>
	                 <view class="flex-col justify-start items-center self-start text-wrapper_4">
	                   <text class="font_6">宠物训练</text>
	                 </view>
	               </view>
	             </view>
	           </view>
	           <view class="flex-col shrink-0 group_3 space-y-36">
	             <text class="font_2">距离：1000米</text>
	             <view class="flex-col justify-start items-center text-wrapper_3"><text class="font_5">预约</text></view>
	           </view>
	         </view>
	       </view>

	</view>
	</view>
</template>
<style scoped>

/* //code.fun生成的全局 */
@import url('../../static/css/style.css');
.page {
  background-color: #f5f7f7;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding: 128rpx 0 196rpx;
  background-image: linear-gradient(180deg, #ffc300 0%, #ffffff00 100%);
  overflow: hidden;
}
.text {
  margin-left: 40rpx;
  color: #000000;
  font-size: 52rpx;
  line-height: 49rpx;
}
.group {
  padding: 156rpx 0 148rpx;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 42rpx;
}
.text_2 {
  margin-left: 48rpx;
  color: #000000;
  font-size: 32rpx;
  line-height: 30rpx;
}
.image {
  width: 359rpx;
  height: 332rpx;
}
.pos_2 {
  position: absolute;
  right: 0;
  bottom: 0;
}
.section_2 {
  padding: 28rpx 0 20rpx;
  background-color: #faf5e6;
  overflow: hidden;
}
.space-x-22 > view:not(:first-child),
.space-x-22 > text:not(:first-child),
.space-x-22 > image:not(:first-child) {
  margin-left: 44rpx;
}
.pos_3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 230rpx;
}
.font_1 {
  font-size: 28rpx;
  line-height: 26rpx;
  color: #081329;
}
.text_3 {
  margin-left: -112rpx;
}
.group_2 {
  padding-top: 12rpx;
  width: 121rpx;
  height: 31rpx;
}
.section_3 {
  background-image: linear-gradient(90deg, #ffc300 0%, #cccccc00 100%);
  height: 18rpx;
}
.pos_4 {
  position: absolute;
  left: 4rpx;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.list {
  padding-left: 20rpx;
  padding-right: 12rpx;
}
.list-item {
  padding: 20rpx 0;
  border-bottom: solid 1rpx #0000000d;
}
.space-x-20 > view:not(:first-child),
.space-x-20 > text:not(:first-child),
.space-x-20 > image:not(:first-child) {
  margin-left: 40rpx;
}
.image_2 {
  width: 276rpx;
  height: 186rpx;
}

.space-y-8{margin-left:20rpx;}
.space-y-8 > view:not(:first-child),
.space-y-8 > text:not(:first-child),
.space-y-8 > image:not(:first-child) {
  margin-top: 16rpx;
}
.text_4 {
  margin-left: 4rpx;
}
.font_3 {
  font-size: 20rpx;
  line-height: 19rpx;
  color: #666e7a;
}
.text_5 {
  margin-left: 4rpx;
}
.group_4 {
  padding-bottom: 8rpx;
}
.space-x-4 > view:not(:first-child),
.space-x-4 > text:not(:first-child),
.space-x-4 > image:not(:first-child) {
  margin-left: 8rpx;
}
.text-wrapper {
  padding: 12rpx 0;
  background-color: #43cf7c1a;
  width: 104rpx;
  height: 40rpx;
}
.font_2 {
  font-size: 20rpx;
  line-height: 19rpx;
  color: #43cf7c;
}
.text-wrapper_2 {
  padding: 12rpx 0;
  background-color: #42cccf1a;
  width: 104rpx;
  height: 40rpx;
}
.font_4 {
  font-size: 20rpx;
  line-height: 19rpx;
  color: #42cccf;
}
.text-wrapper_4 {
  padding: 12rpx 0;
  background-color: #cf7d421a;
  width: 104rpx;
}
.font_6 {
  font-size: 20rpx;
  line-height: 19rpx;
  color: #cf7d42;
}
.group_3 {
  margin-right: 4rpx;
}
.space-y-36 > view:not(:first-child),
.space-y-36 > text:not(:first-child),
.space-y-36 > image:not(:first-child) {
  margin-top: 72rpx;
}
.text-wrapper_3 {
  margin-right: 4rpx;
  padding: 16rpx 0;
  background-color: #ffbd52;
  width: 126rpx;
}
.font_5 {
  font-size: 24rpx;
  line-height: 22rpx;
  color: #ffffff;
}
.equal-division {
  margin-top: 26rpx;
}
.section_4 {
  padding: 24rpx 0;
  background-color: #ffffff;
  overflow: hidden;
}
.group_5 {
  flex: 1 1 150rpx;
}
.equal-division-item {
  padding: 12rpx 0;
}
.space-y-4 > view:not(:first-child),
.space-y-4 > text:not(:first-child),
.space-y-4 > image:not(:first-child) {
  margin-top: 8rpx;
}
.image_3 {
  width: 48rpx;
  height: 48rpx;
}
.font_7 {
  font-size: 20rpx;
  font-family: HarmonyOSSansSC;
  line-height: 19rpx;
  color: #666e7a;
}
.text_6 {
  color: #ffbd52;
  line-height: 18rpx;
}
.text_7 {
  line-height: 18rpx;
}
.text_8 {
  line-height: 18rpx;
}
.text_9 {
  line-height: 18rpx;
}
.text_10 {
  line-height: 18rpx;
}
</style>


<script>
	const address = require('@/utils/address.js').default;
	const API = require('@/utils/api/shops.js').default;
	const $ = require('@/utils/api.js');
	let self;
	export default {
		data() {
			return {
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
				sortType: 1,
				height: 0,
				list: [],
				page: 1,
				pageSize: 20,
				totalPage: 1,
				title: '',
				shopId: '',
				catePid: '',
				cateTid: '',
				cateId: '',
				shopCateId: '',
				type: '',
				sort: '',
				provinceList: address.province_list,
				provinceShow: false,
				province: '',
				max: '',
				min: '',
				spread: '',
				cateName: '',
			};
		},
		onLoad: function(options) {
			self = this;
			let height = getApp().globalData.height;
			height = height-60;
			if(this.isIphonex) {
				height-=34;
			}
			this.height = height;
			this.title = options.title ? options.title : '';
			this.catePid = options.catePid ? options.catePid : '';
			this.cateTid = options.cateTid ? options.cateTid : '';
			this.cateId = options.cateId ? options.cateId : '';
			this.shopId = options.shopId ? options.shopId : '';
			this.type = options.type ? options.type : '';
			this.spread = options.spread ? options.spread : '';
			this.cateName = options.cateName ? options.cateName : '';
			this.init();
		},
		methods: {
			clear() {
				this.title = '';
				this.cateName = '';
				this.catePid ='';
				this.cateTid = '';
				this.cateId ='';
				this.shopCateId = '';
				this.page = 1;
				this.getList();
			},
			reset() {
				this.province = '';
				this.max = '';
				this.min = '';
			},
			chooseProvince(item) {
				if(this.province == item) {
					this.province = '';
				}else{
					this.province = item;
				}
			},
			changeSort(type) {
				if(type == 'price'){
					this.sort = this.sort == 'price desc' ? 'price asc' : 'price desc';
				}else{
					this.sort = type;
				}
				this.page = 1;
				this.getList();
			},
			getList() {
				$.ajax({
					// url: API.shopListWithShopCate,
					url: API.shopListWithCate,
					data: {
						shopId: self.shopId,
						catePid: self.shopId != '' ? '' : self.catePid,
						cateTid: self.shopId != '' ? '' : self.cateTid,
						cateId: self.shopId != '' ? '' : self.cateId,
						shopCatePid: self.shopId != '' ? self.catePid : '',
						shopCateTid: self.shopId != '' ? self.cateTid : '',
						shopCateId: self.shopId != '' ? self.cateId : '',
						title: self.title,
						type: self.type,//1普通商品>>2秒杀商品>>3拼团商品
						sort: self.sort,
						status: '',
						minAmount: self.min,
						maxAmount: self.max,
						provinceCode: self.province,
						page: self.page,
						pageSize: self.pageSize,
						spreadStatus: self.spread != '' ? '1' : '',
					},
					method: 'GET',
					success(res) {
						let list = [];
						if (self.page != 1) {
							list = self.list.concat(res.data.list);
						} else {
							list = res.data.list ? res.data.list : [];
						}
						self.totalPage = res.data.totalPage;
						self.list  = list;
					}
				})
			},
			seach() {
				this.page = 1;
				this.getList();
				this.$refs.popup.close();
			},
			init() {
				this.getList();
			},
		},
		created() {},
		computed: {
			i18n() {
				return this.$t('search')
			},
		},
		mounted() {},
		destroyed() {},
		components: {},
		onPullDownRefresh() {},
		onReachBottom() {
			if(this.page < this.totalPage) {
				this.page += 1;
				this.getList();
			}
		}
	}
</script>

